<template>
  <div>
    <div style="font-weight: bold; font-size: large; margin-bottom: 20px">
      链路查询
    </div>
    <div class="components-input-demo-presuffix" style="margin-bottom: 20px">
      <a-input
        placeholder="请输入用户Id"
        v-model:value="query.u_id"
        style="width: 25%; margin-right: 10px"
      >
        <template #prefix>
          <user-outlined type="user" />
        </template>
      </a-input>
      <a-input
        placeholder="请输入设备ID"
        v-model:value="query.dev_id"
        style="width: 25%; margin-right: 10px"
      >
        <template #prefix>
          <user-outlined type="user" />
        </template>
      </a-input>
      <a-range-picker
        v-model:value="query.searchTime"
        style="width: 25%; margin-right: 10px"
      />
      <a-button type="primary" style="width: 10%" @click="getLogsByQuery">
        <template #icon><SearchOutlined /></template>
        查询
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 1500, y: 400 }"
    >
      <template #action="{ record }">
        <a @click="gotodebug(record)">查看</a>
      </template>
    </a-table>
  </div>
</template>

<script>
import { get, post } from "@/common";
import moment from "moment";
import { defineComponent, ref, reactive } from "vue";
import { UserOutlined, SearchOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const columns = [
  {
    title: "用户ID",
    width: 300,
    dataIndex: "u_id",
    key: "userId",
  },
  {
    title: "设备ID",
    width: 300,
    dataIndex: "dev_id",
    key: "deviceId",
  },
  {
    title: "RequestID",
    dataIndex: "request_id",
    key: "requestId",
    width: 300,
  },
  {
    title: "SearchID",
    dataIndex: "search_id",
    key: "searchId",
    width: 300,
  },
  {
    title: "搜索时间",
    dataIndex: "search_time",
    key: "searchTime",
    width: 300,
  },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
    width: 100,
    slots: {
      customRender: "action",
    },
  },
];

export default defineComponent({
  setup() {
    const router = useRouter();
    const gotodebug = (record) => {
      router.push({ path: "/mainpage/debug", query: { id: record.search_id } });
    };

    const query = reactive({
      u_id: "",
      dev_id: "",
      searchTime: [],
    });

    let data = ref([]);

    const getAllLogs = () => {
      post("/ops/link/getLogs", {
        u_id: query.u_id,
        dev_id: query.dev_id,
        start_time: "",
        end_time: "",
      }).then((res) => {
        data.value = [];
        for (let i in res.data) {
          data.value.push({
            key: i,
            u_id: res.data[i].u_id,
            dev_id: res.data[i].dev_id,
            request_id: res.data[i].request_id,
            search_id: res.data[i].search_id,
            search_time: res.data[i].search_time,
          });
        }
      });
    };
    getAllLogs();
    const getLogsByQuery = () => {
      post("/ops/link/getLogs", {
        u_id: query.u_id,
        dev_id: query.dev_id,
        start_time: moment(query.searchTime[0]).format("YYYY-MM-DD HH:mm:ss"),
        end_time: moment(query.searchTime[1]).format("YYYY-MM-DD HH:mm:ss"),
      }).then((res) => {
        data.value = [];
        for (let i in res.data) {
          data.value.push({
            key: i,
            u_id: res.data[i].u_id,
            dev_id: res.data[i].dev_id,
            request_id: res.data[i].request_id,
            search_id: res.data[i].search_id,
            search_time: res.data[i].search_time,
          });
        }
      });
    };
    return {
      value3: ref([]),
      data,
      query,
      getLogsByQuery,
      gotodebug,
    };
  },
  data() {
    return {
      columns,
    };
  },
  components: {
    UserOutlined,
    SearchOutlined,
  },
});
</script>

<style>
</style>